<template>
    <view
        :class="'sector ' + ((displayPercent < 50 && displayPercent !== 0) || displayPercent === 100 ? 'sector1' : 'sector2')"
        :style="
            'height:' +
            outerDiameterClone +
            'rpx;width:' +
            outerDiameterClone +
            'rpx;' +
            ((displayPercent < 50 && displayPercent !== 0) || displayPercent === 100 ? (activeColor ? 'background:' + activeColor : '') : 'background:' + backgroundColor)
        "
    >
        <view
            v-if="displayPercent !== 0 && displayPercent !== 100"
            class="sx1"
            :style="
                'height:' +
                outerDiameterClone +
                'rpx;width:' +
                outerDiameterClone +
                'rpx;clip: rect(0rpx, ' +
                outerDiameterClone / 2 +
                'rpx, ' +
                outerDiameterClone +
                'rpx, 0rpx);background:' +
                ((displayPercent < 50 && displayPercent !== 0) || displayPercent === 100 ? backgroundColor : activeColor ? activeColor : '')
            "
        ></view>
        <view
            v-if="displayPercent !== 50 && displayPercent !== 0 && displayPercent !== 100"
            class="sx2"
            :style="
                'transform: rotate(' +
                (displayPercent < 50 ? (360 * displayPercent) / 100 - 180 : (360 * (displayPercent - 100)) / 100) +
                'deg);height:' +
                outerDiameterClone +
                'rpx;width:' +
                outerDiameterClone +
                'rpx;clip: rect(0rpx, ' +
                outerDiameterClone / 2 +
                'rpx, ' +
                outerDiameterClone +
                'rpx, 0rpx);background:' +
                ((displayPercent < 50 && displayPercent !== 0) || displayPercent === 100 ? backgroundColor : activeColor)
            "
        ></view>
        <view class="sx_t" :style="'width:' + innerDiameterClone + 'rpx;height:' + innerDiameterClone + 'rpx;background:' + innerColor">
            <view v-if="showValue" class="l-value-class" :style="'color:' + (valueColor ? valueColor : '') + ';font-size:' + valueSize + 'rpx'">{{ displayPercent }}%</view>
            <slot></slot>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            displayPercent: 0,
            outerDiameterClone: '',
            innerDiameterClone: ''
        };
    },

    externalClasses: ['l-value-class'],

    props: {
        percent: {
            type: Number,
            default: 0
        },
        outerDiameter: {
            type: Number,
            default: 220
        },
        innerDiameter: {
            type: Number,
            default: 170
        },
        activeColor: {
            type: String
        },
        backgroundColor: {
            type: String,
            default: '#EBEBEB'
        },
        innerColor: {
            type: String,
            default: '#FFFFFF'
        },
        active: {
            type: Boolean,
            default: false
        },
        duration: {
            type: Number,
            default: 30
        },
        showValue: {
            type: Boolean,
            default: false
        },
        valueColor: {
            type: String
        },
        valueSize: {
            type: Number,
            default: 25
        }
    },

    options: {
        multipleSlots: true,
        pureDataPattern: /^_/
    },

    watch: {
        percent: async function (e) {
            if (e > 100)
                this.setData({
                    percentClone: 100
                });
            else if (e < 0)
                this.setData({
                    percentClone: 0
                });
            else if (this.active) {
                let t = this.displayPercent;
                if (t < e)
                    for (; t < e; ) {
                        await this.sleep(this.duration);
                        t += 1;
                        this.setData({
                            displayPercent: t
                        });
                    }
                else if (t > e) {
                    for (; t > e; ) {
                        await this.sleep(this.duration);
                        t -= 1;
                        this.setData({
                            displayPercent: t
                        });
                    }
                }
            } else {
                this.setData({
                    displayPercent: e
                });
            }
        },
        outerDiameter: function (e) {
            if (e < this.innerDiameterClone) {
                e = this.innerDiameterClone;
                this.setData({
                    outerDiameterClone: e
                });
            }
        },
        innerDiameter: function (e) {
            if (e < 0) {
                this.setData({
                    innerDiameterClone: 0
                });
            }
        }
    },

    methods: {
        sleep: (e) =>
            new Promise((t) => {
                setTimeout(t, e);
            })
    },

    created: function () {}
};
</script>
<style>
.sector {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sx1,
.sx2 {
    position: absolute;
    top: 0;
    left: 0;
}
.sx1 {
    z-index: 1;
}
.sx2 {
    z-index: 2;
}
.sx_t {
    border-radius: 50%;
    z-index: 3;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.sector1 {
    background: #3963bc;
}
.sector2 .sx1,
.sector2 .sx2 {
    background: #3963bc;
    transform: rotate(180deg);
}
</style>
